<template>
  <el-select
    v-model="date"
    size="mini"
    style="width:100px;"
    @change="(val) => {dateChange(val, true)}"
  >
    <el-option
      v-for="(item) in timeOption"
      :key="item.value"
      :label="item.text"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue'
import {getDays} from '@/utils/dateTime'

export default {
  emits: ['dateChange'],
  setup(props, context) {
    var datas = reactive({
      date: '1',
      timeOption: [
        {
          id: '1',
          text: '近7天',
          value: [getDays(7).start, getDays(7).end],
        },
        {
          id: '2',
          text: '近一个月',
          value: [getDays(30).start, getDays(30).end],
        },
        {
          id: '3',
          text: '近三个月',
          value: [getDays(90).start, getDays(90).end],
        },
        {
          id: '4',
          text: '近半年',
          value: [getDays(180).start, getDays(180).end],
        },
      ],
    })
    const handlHours = (val) => {
      var date = new Date(val)
      var hours = date.getHours() + 8
      date.setHours(hours)
      const str = date.toISOString().replace('.000Z', '+08:00')
      return str
    }
    const dateChange = (val, bool) => {
      var itm = datas.timeOption.find((p) => p.id === val)
      var dateTime = [handlHours(itm.value[0]), handlHours(itm.value[1])]
      context.emit('dateChange', dateTime, bool)
    }
    const dateType = () => {
      return datas.date
    }
    onMounted(() => {
      dateChange('1', false)
    })
    return {
      ...toRefs(datas),
      dateChange,
      dateType,
    }
  },
}
</script>

<style>
</style>
